<template>
<!-- <pullRefresh ref="pullresh"> -->
      <div class="content" v-if="list.length>0">
          <div v-for="(item,i) in list" :key="i">
                 <!-- <div class="time-text"><span>5月4日  13:30</span></div> -->
            <el-card  :body-style="{ padding: '1.6rem','border-radius':'1rem'}"  shadow="never"  @click="gotoShopRDetail(item)">

             <div class="card-box">
              <div class="card-title">
              <el-icon  size="1.3rem" style="margin-top:0.2rem;" v-if="item.checked" @click.stop="pitchOn(i)"><sc-icon-Checked /></el-icon>
              <el-icon  size="1.3rem" style="margin-top:0.2rem;"  v-else @click.stop="pitchOn(i)"><sc-icon-Unselected /></el-icon>
              <el-icon  size="1.3rem" style="margin-left:1rem;margin-top:0.2rem;" ><sc-icon-ShopName /></el-icon>
                <div class="card-title-name">北京仁和大药房有限北</div>
              </div>
                <div class="site-text">
                     <el-icon  size="1.2rem" style="margin-left:2.4rem;margin-top:0.2rem;" ><sc-icon-SpecificLocation /></el-icon>
                <span class="site-text-name">北京市/北京市区/京市区/北市区/</span>
               </div>
            <div class="site-text">
                             <el-icon  size="1.2rem" style="margin-left:2.4rem;margin-top:0.2rem;" ><sc-icon-RecommendedStore /></el-icon>
                <span class="site-text-name">北京市区/北市区/</span>
              </div>
                              <div class="site-text">
                                      <el-icon  size="1.2rem" style="margin-left:2.4rem;margin-top:0.2rem;" ><sc-icon-Information /></el-icon>
                <span class="site-text-name">北京市/北京市区北市区/</span>
              </div>
         </div>
      </el-card>
          </div>
      </div>
      <div class="footer-box">
          <div class="left-box">
             <el-icon  size="1.4rem" v-if="checkall" @click="checkallfn"><sc-icon-Checked /></el-icon>
             <el-icon  size="1.4rem"  v-else @click="checkallfn"><sc-icon-Unselected /></el-icon>
             <span class="checkalltext">全选</span>
          </div>
          <div class="right-box">
              <div class="btn" @click="setremark">
                    <span>提交</span>
              </div>
          </div>
      </div>
       <div>

       </div>
        <el-dialog
    v-model="centerDialogVisible"
    style="border-radius:1rem;width: 80% !important;"
    align-center
    :show-close="false"
    @close = 'cancel'
  >
 <template #header>
        <div class="remark-header">
             备注信息
        </div>
  </template>
          <el-input v-model="remark" type="textarea"  placeholder="请输入其他门店不跑的原因..." :autosize="{minRows:5,maxRows:5}"></el-input>
    <template #footer>
        <div class="btn-box">
              <div class="btn" @click="setdata">
                    <span>提交</span>
              </div>
               <div class="btn-cancel" @click="cancel">
                    <span>取消</span>
              </div>
        </div>
    </template>
  </el-dialog>
<!-- </pullRefresh> -->

</template>

<script>
// import pullRefresh from '../../components/pullRefresh.vue'
export default {
   data(){
       return{
          input4:'',
          list:[],
          from:{
            name:''
          },
          remark:'',
          checkall:false,
          // dataAPI:this.$API.clientM.detail.inventory,
          centerDialogVisible:false,
          recommend:[]
       }
   },
components:{
  //  pullRefresh
},
created(){
     this.getlist()
},
methods:{
   search(){
      this.from = {...this.from}
      this.list = []
      this.$refs.pullresh.reset()
   },
   async getlist(){
         let res =    await this.$API.clientM.detail.inventory.post({})
         if(res.code == '0'){
           this.list = res.data
         }

   },
//    单选
   pitchOn(index){
       this.list[index].checked = !this.list[index].checked
       let Bool = true
     this.list.forEach(item=>{
         if(!item.checked){
            Bool = false
         }
         this.checkall = Bool
     })
   },
//    全选
   checkallfn(){
       this.checkall = !this.checkall
     this.list.forEach(item=>{
         item.checked = this.checkall
     })
   },
//    提交
   setdata(){
      // if(this.remark){
             let data = {
       
            }
      // }else{
        this.$message.success('操作成功')

      // }

   },
   gotoShopRDetail(item){
         let data = JSON.stringify(item)
    this.$router.push({name:'ShopRDetail',params:{data}})
   },
   setremark(){
          this.recommend  = []
        this.list.forEach(item=>{
          if(item.checked){
             this.recommend.push(item)
          }
        }) 
        if(this.recommend.length>0){
          this.centerDialogVisible = true
        }else{
          this.$message.warning({message:'请选择推荐店',offset: window.screen.height / 2})
        }
          
   },
   cancel(){
     this.centerDialogVisible = false
     this.remark = ''
   }
}
}
</script>

<style scoped>
/* .top{
   margin-top: 50px;
} */
.content{
   /* width: 100vw; */
   /* height: 100vh; */
   padding: 0rem 1.6rem ;
   margin-top: 5rem;
   background-color: #F7F7F7;
}
.time-text{
font-size: 1rem;
font-weight: 400;
color: #999999;
display: flex;
justify-content: center;
align-items: center;
margin-top: 1.6rem;
}
.card-box{

    width: 100%;
    min-height: 11rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: space-between;
    flex-direction: column;
}
.card-header{
    width: 100%;
    display: flex;
}
.card-title{
    font-size: 1.3rem;
font-family: Source Han Sans SC-Regular, Source Han Sans SC;
font-weight: 500;
color:var(--el-color-text-3);
display: flex;
/* align-items: center; */
}

.card-title-name{
    margin-left: 1rem;
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--el-color-text-3);
    line-height: 1.66rem;
}
.site-text{
    /* min-height: 2rem; */
    display: flex;
    /* align-items: center; */
    margin-top: 1.6rem;
    font-size: 1.2rem;
    font-family: Source Han Sans SC-Regular, Source Han Sans SC;
    font-weight: 400;
    color:var(--el-color-text-6);
}
.site-text-name{
    margin-left: 1rem;
    font-size: 1.2rem;
    font-family: Source Han Sans SC-Regular, Source Han Sans SC;
    font-weight: 400;
    color:var(--el-color-text-6);
        line-height: 1.66rem;
}
/deep/.el-card{
    margin-top: 1.6rem !important;
}


.footer-box{
    position:fixed;
    top: 0;
    background: #fff;
    width: 100%;
    height: 4rem;
    display: flex;
justify-content: space-between;
    align-items: center;
}
.left-box{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 3rem;
}
.right-box{
        display: flex;
    justify-content: center;
    align-items: center;
     margin-right: 3rem;
}
.btn{
    width: 7rem;
    height: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
border-radius: 2.75rem 2.75rem 2.75rem 2.75rem;
background: var(--el-color-primary);
font-size: 1.2rem;
font-weight: 400;
color: var(--el-color-bac);
}
.btn:active {
    background: var(--el-color-primary);
    opacity: 0.5;
    /* color: var(--el-color-text-9); */
}
.checkalltext{
margin-left: 0.6rem;
font-size: 1.4rem;
font-weight: 400;
    color:var(--el-color-text-6);
}



/* 弹窗 */

.remark-header{
  font-size: 1.4rem;
  text-align: center;
font-weight: 400;
    color:var(--el-color-text-9);
}
.btn-box{
  display: flex;
  justify-content: space-around;
}
/deep/.el-textarea__inner{
  background: #F7F7F7 !important;
  border: none!important;
}
.btn-cancel{
    width: 7rem;
    height: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
border-radius: 2.75rem 2.75rem 2.75rem 2.75rem;
background: var(--el-color-text-9);
font-size: 1.2rem;
font-weight: 400;
color: var(--el-color-bac);
}
/deep/.el-dialog__body{
  padding: calc(var(--el-dialog-padding-primary)) var(--el-dialog-padding-primary) !important;
}
.btn-cancel:active {
    background: var(--el-color-text-9);
    opacity: 0.5;
}
</style>